<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>WebXR made with Unity sample</title>
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
  <link rel="stylesheet" href="TemplateData/style.css">
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-163892314-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'UA-163892314-1');
  </script>
</head>

<body>
  <div id="unity-container" class="unity-desktop">
    <canvas id="unity-canvas"></canvas>
    <div id="unity-loading-bar">
      <div id="unity-logo"></div>
      <div id="unity-progress-bar-empty">
        <div id="unity-progress-bar-full"></div>
      </div>
    </div>
    <div id="unity-footer">
      <div id="unity-webgl-logo"></div>
      <div id="unity-fullscreen-button"></div>
      <div id="unity-build-title">SimpleWebXR</div>
    </div>
  </div>

  <!-- Browser capabilities -->
  <div>
    <table style="margin:auto">
      <tr>
        <td>See how it works on GitHub : <a
            href="https://github.com/Rufus31415/Simple-WebXR-Unity">https://github.com/Rufus31415/Simple-WebXR-Unity</a>
        </td>
      </tr>
      <tr>
        <td class="cell-ok" id="webxr-supported-ar" style="display: none;">✔️ WebXR supported (AR)</td>
        <td class="cell-ok" id="webxr-supported-vr" style="display: none;">✔️ WebXR supported (VR)</td>
        <td class="cell-nok" id="webxr-not-supported">❌ WebXR not supported</td>
        <td class="cell-ok" id="hand-supported" style="display: none;">👌 Hand tracking enabled</td>
        <td class="cell-nok" id="hand-not-supported" style="display: none;">👎 Hand tracking not supported on this
          device</td>
        <td class="cell-ok" id="page-secured" style="display: none;">🔒 Page is secured</td>
        <td class="cell-nok" id="page-not-secured">🚫 Page is not secured (https or localhost)</td>
        <td class="cell-ok" id="safari-webgl-ok" style="display: none;">✔️ WebGL 2.0 should be disabled on Safari</td>
        <td class="cell-nok" id="safari-webgl-nok" style="display: none;">❌ WebGL 2.0 should be disabled on Safari, go
          to settings and disable this experimental feature</td>
      </tr>
    </table>
  </div>

  <!-- Footer samples -->
  <iframe src="https://rufus31415.github.io/webxr/webxr-carousel.html"
    onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));'
    style="height:500px;width:100%;border:none;overflow:hidden;"></iframe>

  <!-- The Modal popup -->
  <div id="modalPopup" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p><a href="#" id="iosPermission" style="display:none;"
          onclick="DeviceMotionEvent.requestPermission();modal.style.display='none'">Click here to allow accelerometer
          access</a></p>
    </div>

  </div>


  <script>
    var buildUrl = "Build";
    var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
    var config = {
      dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
      frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
      codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "{{{ COMPANY_NAME }}}",
      productName: "{{{ PRODUCT_NAME }}}",
      productVersion: "{{{ PRODUCT_VERSION }}}",
    };

    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");
    var loadingBar = document.querySelector("#unity-loading-bar");
    var progressBarFull = document.querySelector("#unity-progress-bar-full");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");

    canvas.style.width = "960px";
    canvas.style.height = "600px";
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        fullscreenButton.onclick = () => {
          unityInstance.SetFullscreen(1);
        };
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);




    document.addEventListener('DOMContentLoaded', (event) => {
      // Show browser WebXR capability
      if ('xr' in navigator) {
        navigator.xr.isSessionSupported('immersive-vr').then(function (supported) {
          if (supported) {
            document.getElementById("webxr-supported-vr").style.display = "inline-block";
            document.getElementById("webxr-not-supported").style.display = "none";
          }
        })

        navigator.xr.isSessionSupported('immersive-ar').then(function (supported) {
          if (supported) {
            document.getElementById("webxr-supported-ar").style.display = "inline-block";
            document.getElementById("webxr-not-supported").style.display = "none";
          }
        })
      }

      // Show a message if the current window is not secured
      if (window.isSecureContext === true) { // page secured
        document.getElementById("page-secured").style.display = "inline-block";
        document.getElementById("page-not-secured").style.display = "none";
      }
      else if (window.isSecureContext === false) { // page not secured
        document.getElementById("page-secured").style.display = "none";
        document.getElementById("page-not-secured").style.display = "inline-block";
      }
      else { // window.isSecureContext not supported (like servo)
        document.getElementById("page-secured").style.display = "none";
        document.getElementById("page-not-secured").style.display = "none";
      }


      // Show a message if WebGL2.0 experimental feature is enabled on Webkit
      if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1) {
        if (UnityLoader.SystemInfo.hasWebGL == 2) {
          document.getElementById("safari-webgl-nok").style.display = "inline-block";
        }
        else {
          document.getElementById("safari-webgl-ok").style.display = "inline-block";
        }
      }


      // Modal popup
      var modal = document.getElementById("modalPopup");
      document.getElementsByClassName("close")[0].onclick = function () {
        modal.style.display = "none";
      }
      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function (event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      }

      // on iOS 13+, show request permission button
      document.addEventListener("SimpleWebXRNeedMotionPermission", () => {
        modal.style.display = "block";
      }, false);
    });
  </script>
</body>

</html>